<template>
  <div class="page-content">
    <div class="header">
      <h3>视频课程管理</h3>
    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="课程管理" :name="1"></el-tab-pane>
    </el-tabs>

    <div class="question-group">
      <div class="left">
        <question-menu :tree-data="tableData[0]?.children" question-type="02" :default-active="defaultGroupId"
          @add-parent="addCategory" @select="questionDetail" @edit="handleEdit"
          @delete="handleDeleteChild"></question-menu>
      </div>
      <div class="right">
        <div class="header">
          <h3>视频列表</h3>
          <p v-if="carModelInfo">（{{ carModelInfo }}）</p>
        </div>
        <video-list-table :key="videoTableKey" :edit-info="editData" @upload-group="getData"></video-list-table>
      </div>
    </div>
    <add-video-source-group-dialog v-if="showAddVideoGroupDialog" :show-add-video-group-dialog="showAddVideoGroupDialog"
      :edit-info="editData" @close-dialog="handleCloseAddParent"></add-video-source-group-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getcategoryList, operationCategory } from '@/api/questionbanklabel'
import { getStatDataToType } from '@/api/questionbank'
import VideoListTable from '@/views/question_bank/components/VideoListTable.vue'
import AddVideoSourceGroupDialog from './components/AddVideoSourceGroupDialog.vue'
import { ElMessageBox } from 'element-plus'
import QuestionMenu from './components/QuestionMenu.vue'

interface User {
  id: number | string
  name: string
  img: string
  parentId?: string | number
  questionCount?: number
  children?: User[]
}

const showAddVideoGroupDialog = ref(false)
const activeName = ref(1)
const editData = ref<any>()
const tableLoading = ref(false)
const videoTableKey = ref(1)
const carModelInfo = ref('')
const defaultGroupId = ref('')
const staticsQuestionDataInfo = ref('')

const tableData = ref<User[]>([])

function questionDetail(item: any) {
  editData.value = JSON.parse(JSON.stringify(item))
  videoTableKey.value = new Date().getTime()
  carModelInfo.value = item.carModelList.map((_item: any) => _item.carName).join(',')
  getStatDataToTypeData(item.id)
}

function addCategory() {
  showAddVideoGroupDialog.value = true
  editData.value = {
    id: '',
    pageUrlType: '02',
    parentId: tableData.value[0]?.id
  }
}

function handleCloseAddParent(value: boolean) {
  showAddVideoGroupDialog.value = false
  if (value) {
    getData()
  }
}

function handleEdit(item: User) {
  showAddVideoGroupDialog.value = true
  editData.value = JSON.parse(JSON.stringify(item))
}

function handleDeleteChild(item: User) {
  ElMessageBox.confirm('确定删除该分类吗？', '确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    handleDelete(String(item.id))
  })
}

async function handleDelete(id: string) {
  const res = await operationCategory.deleteCategory(id)
  if (res.code === '00000') {
    await getData()
  }
}

async function getStatDataToTypeData(groupId: any) {
  const res = await getStatDataToType({
    groupId
  })
  if (res.code === '00000') {
    let data = res.data.filter((item: any) => ![3, 4].includes(item.questionType))
    let result = data.map((item: any) => {
      return `${item.questionTypeName} : ${item.typeCount}`
    })
    staticsQuestionDataInfo.value = result.join(' ; ')
  }
}

async function getData() {
  try {
    tableLoading.value = true
    const res = await getcategoryList.getNewCateGoryId({
      pageNum: 1,
      pageSize: 1000,
      pageUrlType: '02'
    })
    if (res.code === '00000') {
      tableData.value = res.data.list
    }
  } catch (e) {
  } finally {
    tableLoading.value = false
  }
}

onMounted(async () => {
  await getData()

  if (tableData.value.length > 0) {
    let child = tableData.value[0]
    if (child.children && child.children.length > 0) {
      let item: any = child.children[0]
      defaultGroupId.value = item.id
      editData.value = JSON.parse(JSON.stringify(item))
      videoTableKey.value = new Date().getTime()
      carModelInfo.value = item.carModelList.map((_item: any) => _item.carName).join(',')
      await getStatDataToTypeData(item.id)
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep(.row-parent) {
  background-color: #f4f6f8;
}

::v-deep(.row-child) {
  background-color: #fff;
}

.drag-over-line {
  position: absolute;
  height: 2px;
  background-color: #409eff;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
}

.icon-drag {
  color: var(--el-color-primary);
  margin-right: 10px;
  cursor: move;
}

.icon-rotate {
  color: var(--el-color-primary);
  display: inline-block;
}

.icon {
  margin-right: 10px;
  margin-bottom: -6px;
}

.child-drag {
  padding-left: 45px;
}

.page-content {
  .header {
    margin-bottom: 20px;
  }
}

.question-group {
  display: flex;
  width: 100%;

  .left {
    width: 300px;
    margin-right: 20px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .right {
    flex: 1;
    height: 100%;
    overflow-x: auto;

    .header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      p {
        margin-left: 2px;
        font-size: 12px;
      }
    }
  }
}
</style>
